<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 col-12">
        <div
          style="
            height: 50px;
            line-height: 50px;
            border-bottom: 2px solid whitesmoke;
            background-color: white;
            margin-top: 10px;
          "
          class="col-md-12 col-12"
        >
          <span style="font-size: 15px; font-weight: bold">基本信息</span>
          <el-tooltip
            class="item"
            effect="dark"
            content="尽量填写真实信息,你的信息将会严格保密"
            placement="right"
          >
            <i style="color: lightgrey" class="el-icon-question"></i>
          </el-tooltip>
          <transition name="el-fade-in">
            <span
              v-if="userInfo.address == '暂无'"
              style="color: orange; cursor: pointer"
              >每个星期只能修改一次,请<span style="color: red"
                >谨慎修改</span
              ></span
            >
          </transition>
        </div>

        <el-form :model="userInfo" label-width="80px">
          <el-form-item label="唯一编号">
            <el-input :disabled="true" v-model="userInfo.id"></el-input>
          </el-form-item>

          <el-form-item label="创建时间">
            <el-input :disabled="true" v-model="userInfo.creatTime"></el-input>
          </el-form-item>

          <el-form-item label="修改昵称">
            <el-input v-model="userInfo.nick"></el-input>
          </el-form-item>

          <el-form-item label="更换性别">
            <el-radio-group v-model="userInfo.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="个性签名">
            <el-input
              placeholder="说点什么..."
              type="textarea"
              v-model="userInfo.desc"
            ></el-input>
          </el-form-item>

          <el-form-item label="隐私设置">
            <el-checkbox-group v-model="set">
              <el-checkbox label="展示关注"></el-checkbox>
              <el-checkbox label="展示粉丝"></el-checkbox>
              <el-checkbox label="展示收藏"></el-checkbox>
              <el-checkbox label="展示文章"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button @click="updateUser()" type="primary">保存</el-button>
            <el-button @click="back()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { fake } from "../../assets/fake";
export default {
  data() {
    return {
      userInfo: {
        nick: "",
        id: "",
        sex: "男",
        desc: "",
        creatTime: "",
        avatar: "",
      },
      set: [],
      isGetAccount: false,
      isUpdate: false,
      username: "",
    };
  },
  watch: {
    sex: {},
    $route() {},
  },
  methods: {
    updateUser() {
      let _this = this;
      fake.account.forEach((value) => {
        if (value.user.info.id === _this.userInfo.id) {
          value.user.info = _this.userInfo;
          value.user.set = {
            showFocus: this.set.indexOf("展示关注") !== -1,
            showFans: this.set.indexOf("展示粉丝") !== -1,
            showLikes: this.set.indexOf("展示收藏") !== -1,
            showArticle: this.set.indexOf("展示文章") !== -1,
          };
        }
      });
      _this.$notify({
        title: "提示",
        message: "更新成功",
        type: "success",
      });
      if (this.username !== this.userInfo.nick) {
        this.$alert("用户名发生改变，需要重新登录", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else {
        this.back();
      }
    },
    back() {
      this.$router.replace({
        name:'UserInfo',
        query:{
          id:'1',
          type:'1'
        },
      });
    },
  },
  mounted() {
    let user = fake.self.info;
    this.username = user.nick;
    this.userInfo.nick = user.nick;
    this.userInfo.id = user.id;
    this.userInfo.creatTime = user.creatTime;
    this.userInfo.sex = user.sex;
    this.userInfo.desc = user.desc;
    this.userInfo.avatar = user.avatar;
    this.set = [];
    let reset = fake.methods.getUser(user.id).set;
    if (reset.showFocus) {
      this.set.push("展示关注");
    }
    if (reset.showFans) {
      this.set.push("展示粉丝");
    }
    if (reset.showLikes) {
      this.set.push("展示收藏");
    }
    if (reset.showArticle) {
      this.set.push("展示文章");
    }
  },
};
</script>

<style scoped>
</style>